<template>  
  <div class="dashboard">  
    <!-- 标题部分 -->  
    <div class="header">  
      <div class="title">  
        <i class="icon">💧</i>  
        水量分析  
      </div>  
      <div class="controls"></div>  
    </div>  

    <!-- 图表部分 -->  
    <div id="daschart" class="daschart"></div>  
  </div>  
</template>  

<script>  
import * as echarts from "echarts";  

export default {  
  name: "WaterAnalysis",  
  data() {  
    return {  
      daschartInstance: null,  
    };  
  },  
  mounted() {  
    this.initChart();  
    window.addEventListener("resize", this.handleResize); // 添加窗口缩放监听  
  },  
  beforeDestroy() {  
    window.removeEventListener("resize", this.handleResize); // 移除监听  
    if (this.daschartInstance) {  
      this.daschartInstance.dispose(); // 销毁图表实例，释放内存  
    }  
  },  
  methods: {  
    initChart() {  
      const chartDom = document.getElementById("daschart");  
      this.daschartInstance = echarts.init(chartDom);  

      const option = {  
        backgroundColor: "transparent",  
        tooltip: {  
          trigger: "axis", // 鼠标悬浮时触发  
          axisPointer: {  
            type: "line", // 悬停时显示指示线  
            lineStyle: {  
              color: "#00ffe3",  
            },  
          },  
          backgroundColor: "rgba(0, 0, 0, 0.7)", // 背景颜色  
          borderColor: "#00ffe3", // 边框颜色  
          textStyle: {  
            color: "#fff", // 文字颜色  
          },  
        },  
        grid: {  
          top: "20%",  
          left: "10%",  
          right: "10%",  
          bottom: "15%",  
        },  
        xAxis: {  
          type: "category",  
          data: ["0点", "1点", "2点", "3点", "4点", "5点", "6点", "7点", "8点", "9点"],  
          axisLine: {  
            lineStyle: {  
              color: "#2c668e", // 坐标轴颜色  
            },  
          },  
          axisLabel: {  
            color: "#a1c9f7", // X 轴字体颜色  
          },  
        },  
        yAxis: {  
          type: "value",  
          axisLine: {  
            lineStyle: {  
              color: "#2c668e", // 坐标轴颜色  
            },  
          },  
          splitLine: {  
            lineStyle: {  
              color: "#113347", // 网格线颜色  
              type: "dashed",  
            },  
          },  
          axisLabel: {  
            color: "#a1c9f7", // Y 轴字体颜色  
          },  
        },  
        series: [  
          {  
            name: "水量",  
            type: "line",  
            data: [5, 6, 8, 9, 7, 5, 6, 10, 5, 4],  
            smooth: true, // 曲线平滑  
            lineStyle: {  
              color: "#00ffe3", // 线条颜色  
              width: 2,  
            },  
            areaStyle: {  
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
                { offset: 0, color: "rgba(0, 255, 227, 0.5)" },  
                { offset: 1, color: "rgba(0, 255, 227, 0)" },  
              ]),  
            },  
            symbol: "circle", // 数据点形状  
            symbolSize: 6, // 数据点大小  
            emphasis: {  
              focus: "series", // 鼠标经过时高亮整个系列  
              itemStyle: {  
                color: "#ff4500", // 高亮数据点颜色  
                borderColor: "#fff", // 数据点边框颜色  
                borderWidth: 2,  
              },  
            },  
          },  
        ],  
      };  

      this.daschartInstance.setOption(option);  
    },  
    handleResize() {  
      if (this.daschartInstance) {  
        this.daschartInstance.resize(); // 动态调整图表大小  
      }  
    },  
  },  
};  
</script>  

<style scoped>  
.dashboard {  
  position: relative;  
  width: 100%; /* 容器宽度 */  
  max-width: 600px; /* 最大宽度 */  
  height: 300px; /* 固定高度 */  
  background: rgba(0, 0, 50, 0.7); /* 背景透明深色 */  
  border: 2px solid rgba(0, 255, 255, 0.5); /* 发光的边框 */  
  border-radius: 10px;  
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.6); /* 外发光效果 */  
  padding: 10px;  
  color: #fff;  
  font-family: Arial, sans-serif;  
}  

/* 标题部分 */  
.header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 0 10px;  
}  

.title {  
  flex-grow: 1;  
  text-transform: uppercase;  
  font-size: 16px;  
  font-weight: bold;  
  color: #00b7ff;  
}  

.title {  
  font-size: 16px;  
  display: flex;  
  align-items: center;  
}  

.title .icon {  
  font-size: 24px;  
  margin-right: 5px;  
}  

.controls {  
  width: 20px;  
  height: 20px;  
  background: #ff9500;  
  border-radius: 50%;  
  box-shadow: 0 0 8px rgba(255, 149, 0, 0.6);  
}  

/* 折线图样式 */  
.daschart {  
  width: 100%; /* 确保响应式尺寸 */  
  height: calc(100% - 60px); /* 减去标题部分的高度 */  
  margin-top: 10px;  
}  
</style>